<template>
  <div>
    <!--  创建时间-->
   <el-tag>教练姓名</el-tag>
      <el-row>
        <el-col :span="5">
          <el-input
            type="text"
            placeholder="请输入姓名"
            v-model="coachFormData.name">
          </el-input>
        </el-col>
      </el-row>
    <!-- 内容  -->
    <el-tag>教练职称</el-tag>
    <el-row>
      <el-col :span="5">
        <el-input
          type="text"
          placeholder="请输入教练职称"
          v-model="coachFormData.level">
        </el-input>
      </el-col>
    </el-row>
    <el-tag>图片上传</el-tag>
    <el-upload
      action="http://localhost:8085/upload"
      list-type="picture-card"
      :on-success="fileSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div class="submit">
      <el-button @click="commit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { request } from '@/network/request';

export default {
  name: 'CoachAdd',
  data() {
    return {
      coachFormData: {
        id: '',
        imgUrl: [],
        level: '',
        name: '',
      },
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    fileSuccess(file) {
      this.coachFormData.imgUrl.push(file.data[0]);
    },
    commit() {
      this.coachFormData.imgUrl = this.coachFormData.imgUrl.toLocaleString();
      request({
        url: '/coach/add',
        method: 'post',
        params: this.coachFormData,
      }).then((res) => {
        if (res.code !== 200) this.$message.error('教练添加失败');
        this.$router.push({ path: '/coach/list' });
        this.$message.success('教练添加成功');
      });
    },
  },
};
</script>

<style scoped>
.submit{
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 120px;
  right: 50px;
}
</style>
